<!--
 * @Description: 流程配置组件
 * @Author: wangwangwang
 * @Date: 2020-07-09 14:45:01
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-25 18:07:46
--> 
<template>
  <section class="pages_content config-container">
    <el-container>
      <!-- <el-header>
        <breaDcrumb />
      </el-header> -->
      <el-main>
        <div class="config-header">
          <el-row justify="space-between" align='middle'>
            <el-col :span="10" class="config-title">{{flowsName}}</el-col>
            <el-col :span="14" class="config-submit">
              <el-button v-if="activeName !== 1" class="bottom_all" @click="lastStep()">上一步</el-button>
              <el-button v-if="activeName !== 4" class="bottom_all" @click="nextStep()">下一步</el-button>
              <el-button class="bottom_all" @click="hanldeSubmit()">取消</el-button>
              <el-button v-show="activeName===4" class="bottom_all_two" @click="createPublish()">发布</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="tabs-container">
          <div :class="['tabs-list',activeName===1?'active':'']">基础设置</div>
          <div :class="['tabs-list',activeName===2?'active':'']">{{index===1?'表单设计':'审批要素配置'}}</div>
          <div :class="['tabs-list',activeName===3?'active':'']">流程设计</div>
          <div :class="['tabs-list',activeName===4?'active':'']">高级设置</div>
        </div>
        <div v-if="activeName===1" class="base-container">
          <div style="width:40%;margin-left:10px;">
            <el-form :model="baseForm">
              <el-form-item label="名称：">
                <el-input v-model="flowsName" disabled placeholder="请输入流程名称"></el-input>
              </el-form-item>
              <el-form-item v-if="index===1" label="谁可以发起这个流程：">
                <div class="choise-approve" @click="showPersonVisible=true">{{showApprovePerson || '请选择发起人'}}</div>
              </el-form-item>
              <el-form-item label="审批说明：">
                <el-input v-model="baseForm.description" type="textarea" placeholder="请输入审批说明"></el-input>
              </el-form-item>
              <el-form-item label="状态：">
                <el-radio-group v-model="baseForm.enable">
                  <el-radio :label="1">启用</el-radio>
                  <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div v-if="activeName===2" class="form-container">
          <formsContainer v-if="index===1" ref='formRef' :processManagerId="$route.query.id" :editFormData="editFormData" />
          <formsElements v-else ref="elementRef" :processManagerId="$route.query.id" />
        </div>
        <div v-if="activeName===3" class="flows-container">
          <flowsContainer ref='flowsRef' :processManagerId="$route.query.id" :elementData="elementData" />
        </div>
        <div v-if="activeName===4">
          <AdvancedSet ref="advanceRef" :processManagerId="$route.query.id" />
        </div>
      </el-main>
    </el-container>
    <!-- 选择发起人 -->
    <el-dialog v-dialogDrag title="发起人" :visible.sync="showPersonVisible" width="70%">
      <div class="approve-container">
        <el-button style="margin-left:0;" type="primary" size="medium" class="bottom_all" @click="visible=true">添加发起人</el-button>
        <div class="approve-person">
          <el-row :gutter="10" type='flex' align='middle'>
            <el-col style="width:100px;">已添加：</el-col>
            <el-col :span="20">
              <el-tag v-for="item in choisedPersonData" :key="item.id" class="person-tag" closable :disable-transitions="false" @close="handleClose(item)">
                {{item.name}}
              </el-tag>
            </el-col>
          </el-row>
        </div>
        <div class="fileter-type">
          <el-row :gutter="10" type='flex' align='middle'>
            <el-col style="width:100px;">筛选类型：</el-col>
            <el-col :span="20">
              <el-select v-model="filterType" placeholder="请选择">
                <el-option v-for="item in selectOptions" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
              <span v-if="filterType===1" style="margin-left:5px;">已添加人员均作为发起人</span>
              <span v-else style="margin-left:5px;">添加的人员交集作为发起人</span>
            </el-col>
          </el-row>
        </div>
        <el-button style="margin-left:0;" type="primary" size="medium" class="bottom_all" @click="previewSubmit">预览发起人</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all" @click="showPersonVisible = false">取 消</el-button>
        <el-button class="bottom_all_two" @click="sureSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <personModel :isPerson='true' :visible='visible' :choisedDatas="choisedPersonData" @closeModel='closeModel' @getPerson='setSendPerson' />
    <previewModal :previewVisible='previewVisible' :personData='showPreiewData' :filterType="filterType" @closePreview='closePreview' />
  </section>
</template>
<script>
import { setBaseData, getBaseDetail, setFormData, setAdvanceData, setFlowsData, handleApproveElements } from '@/api/Signed/flows';
// import breaDcrumb from '@/components/breadcrumb';
import personModel from '@/components/ChoisePerson/personModel';
import previewModal from '@/components/ChoisePerson/previewModal'
import formsContainer from './component/forms'; // 自定义表单组件
import formsElements from './component/elements'; // 审批要素组件
import flowsContainer from './component/newflows'; // 流程配置组件
import AdvancedSet from './component/advancedset';  // 高级配置组件
import addTab from "@/common/addTab.js";
import { mapGetters } from 'vuex';
export default {
  components: {
    // breaDcrumb,
    formsContainer,
    flowsContainer,
    formsElements,
    AdvancedSet,
    personModel,
    previewModal,
  },
  data() {
    return {
      activeName: 1,
      flowsName: '',
      baseForm: {
        enable: 1,
        description: '',
      },
      visible: false,
      index: 1,
      showApprovePerson: '',
      previewVisible: false,
      showPersonVisible: false,
      choisedPersonData: [],
      selectOptions: [{
        name: '交集',
        value: 1
      }, {
        name: '并集',
        value: 2
      }],
      filterType: 1,
      id: '', // 流程ID
      baseId: '', // 基础设置id
      processNodeList: [],
      treeData: [],
      nextNode: {},
      editFormData: [],
      showPreiewData: [],
      elementData: [], // 审批要素
    }
  },
  computed: {
    ...mapGetters({
      screenWidth: 'getscreenWidth',
      screenHeight: 'getscreenHeight',
      Collapse: 'getsCollapse',
    }),
    style() {
      let num = 0;
      if (this.Collapse) {
        num = this.screenWidth - 324;
      } else {
        num = this.screenWidth - 220;
      }
      return 'width:' + num + 'px;';
    }
  },
  methods: {
    /**
     * @Description: 预览发起人
     * @Param: 
     * @Author: wangwangwang
     */
    previewSubmit() {
      if (!this.choisedPersonData.length) {
        this.$message({
          type: 'warning',
          message: '请选择人员后再预览'
        });
        return
      }
      this.previewVisible = true;
      this.showPreiewData = JSON.parse(JSON.stringify(this.choisedPersonData));
    },
    closePreview() {
      this.previewVisible = false;
    },
    handleClose(data) {
      this.choisedPersonData.splice(this.choisedPersonData.indexOf(data), 1);
    },
    lastStep() {
      // if (this.activeName === 2) {
      //   if (this.index === 1) { // 表单设置
      //     this.handleFormData(2);
      //   } else { // 审批要素设置
      //     this.handleElementData(2);
      //   }
      // } else if (this.activeName === 3) {
      //   this.handleFlowsData(2);
      // } else if (this.activeName === 4) {
      //   this.activeName = 3
      // }
      this.activeName = this.activeName - 1
    },
    nextStep() {
      if (this.activeName === 1) {
        this.handleBaseData();
      } else if (this.activeName === 2) {
        if (this.index === 1) { // 表单设置
          this.handleFormData(1);
        } else { // 审批要素设置
          this.handleElementData(1);
        }
      } else if (this.activeName === 3) {
        this.handleFlowsData(1);
      }
    },
    hanldeSubmit() {
      this.$router.go(-1);
    },
    createPublish() {
      const { form } = Object.assign({}, this.$refs.advanceRef);
      form.autoPass = form.autoPass ? 1 : 0;
      form.processManagerId = this.id;
      form.handlerWrite = form.handlerWrite ? 1 : 0;
      setAdvanceData(form).then(res => {
        if (res.code === 1001) {
          this.$message({
            message: '流程设置成功！！！',
            type: 'success',
            duration: 1200
          });
          setTimeout(() => {
            addTab.$emit("remove", this.$route.name);
          }, 500)
        }
      })
    },
    /**
     * @Description: 通过流程id判断流程是否已经设置基础设置，并回显
     * @Param: 
     * @Author: wangwangwang
     */
    initBaseData() {
      const params = {
        processManagerId: this.id,
      }
      getBaseDetail(params).then(res => {
        if (res.code === 1001) {
          if (res.data) { // 存在id时默认已配置基础设置，保存时为编辑
            this.baseId = res.data.id;
            this.baseForm = {
              enable: res.data.enable,
              description: res.data.description,
            }
            const personList = res.data.sponsorItems.map((item) => {
              return { id: item.foreignId, name: item.foreignName, type: item.foreignType }
            })
            this.choisedPersonData = personList;
            const newString = [];
            personList.forEach(item => {
              newString.push(item.name);
            });
            this.showApprovePerson = newString.join(';');
          }
        }
      })
    },
    /**
     * @Description: 基础设置配置
     * @Param: 
     * @Author: wangwangwang
     */
    handleBaseData() {
      if (!this.choisedPersonData.length && this.index === 1) {
        this.$message({
          message: '请选择发起人',
          type: 'warning',
          duration: 1200
        });
        return false
      }
      const sponsorItems = this.choisedPersonData.map(item => {
        return { foreignId: item.id, foreignName: item.name, foreignType: item.type, sponsorType: '1' }
      })
      const params = {
        description: this.baseForm.description,
        name: this.flowsName,
        enable: this.baseForm.enable,
        processManagerId: this.id,
        processSponsorSettings: {
          filterType: this.filterType,
          sponsorItems,
        },
      }
      if (this.baseId) {
        params.id = this.baseId;
      }
      setBaseData(params).then(res => {
        if (res.code === 1001) {
          this.$message({
            message: '基础设置配置成功',
            type: 'success',
            duration: 1200
          });
          this.activeName = 2;
        }
      })
    },
    /**
     * @Description: 表单设置
     * @Param: 
     * @Author: wangwangwang
     */
    handleFormData(type) {
      const RowData = this.$refs.formRef.rowData.filter((item) => (
        item.children.length > 0
      ));
      const { formId } = this.$refs.formRef;
      if (!RowData.length) {
        this.$message({
          message: '请填写表单数据！！！',
          type: 'warning',
          duration: 1200
        });
        return
      }
      const newArry = [];
      RowData.forEach((item) => {
        const { children } = item;
        children.forEach((item2) => {
          const { children } = item2;
          children.forEach((item3) => {
            if (!item3.isEmpty) {
              newArry.push(item3)
            }
          })
        })
      })
      /**
       * @Description: 格式化formData, 并对数据进行判断
       * @Param: 
       * @Author: wangwangwang
       */
      const formColumnData = [];
      for (let i = 0; i < newArry.length; i += 1) {
        if ((newArry[i].type === 3 || newArry[i].type === 4 || newArry[i].type === 5) && !newArry[i].dataSourceName) {
          this.$message({
            type: 'warning',
            message: `标题为${newArry[i].name}的数据没有数据来源，请设置后再提交！！！`
          });
          return
        }
        if (newArry[i].type === 6 && !newArry[i].timeType) {
          this.$message({
            type: 'warning',
            message: `标题为${newArry[i].name}的时间选择器没有设置时间类型，请设置后再提交！！！`
          });
          return
        }
        if (newArry[i].code) {
          const data = {
            code: newArry[i].code,
            name: newArry[i].title
          }
          formColumnData.push(data)
        }
      }
      const titleConfig = formColumnData[0];
      if (!titleConfig.name) {
        this.$message({
          type: 'warning',
          message: '请输入流程标题！！！'
        })
        return
      }
      const params = {
        id: formId, // 编辑时需要传此流程的表单id
        formName: '测试名称',
        formStructureData: JSON.stringify(RowData),
        formType: 1,
        processManagerId: this.id,
        formColumnData: JSON.stringify(formColumnData),
      }
      setFormData(params).then(res => {
        if (res.code === 1001) {
          this.$message({
            message: '表单设置成功',
            type: 'success',
            duration: 1200
          });
          if (type === 1) {
            this.elementData = JSON.parse(JSON.stringify(formColumnData));
            this.elementData.shift();
            this.activeName = 3;
          } else {
            this.activeName = 1;
          }
        }
      })
    },
    /**
     * @Description: 审批要素设置
     * @Param: 
     * @Author: wangwangwang
     */
    handleElementData(type) {
      const { tableData, deleteElements } = this.$refs.elementRef;
      const deleteData = deleteElements.map(item => ({...item, status: 0}));
      const newData = [...deleteData, ...tableData].map(item => ({ processManagerId: this.id, approvalId: item.approvalId, status: item.status }));
      handleApproveElements(newData).then(res => {
        if (res.code === 1001) {
          this.$message({
            message: '流程要素设置成功',
            type: 'success'
          });
          if (type === 1) {
            this.activeName = 3;
            this.elementData = tableData;
          } else {
            this.activeName = 1;
          }
        }
      })
    },
    /**
     * @Description: 流程设置
     * @Param: 
     * @Author: wangwangwang
     */
    handleFlowsData(type) {
      this.processNodeList = [];
      const { treeData } = this.$refs.flowsRef;
      this.treeData = JSON.parse(JSON.stringify(treeData));
      if (this.checkNodes(treeData) === undefined) { // 判断节点设置是否符合规则
        this.setNodeIds(treeData); // 设置节点的上下级关系
        this.formatNodeList(treeData); // 将节点格式化成一维数组
        if (this.processNodeList.length === 2) {
          this.$message({
            message: '请至少选择一个审批人！',
            type: 'warning'
          })
          return;
        }
        for (let i = 0; i < this.processNodeList.length; i+=1) {
          if (this.processNodeList[i].title === '请设置条件') {
            this.$message({
              message: '存在未设置条件，请设置后再提交！',
              type: 'warning'
            })
            return;
          }
        }
        const params = {
          processManagerId: this.id,
          processManagerName: this.flowsName,
          processNodeList: this.processNodeList,
          processData: JSON.stringify(treeData),
        }
        setFlowsData(params).then(res => {
          if (res.code === 1001) {
            if (type === 1) {
              this.activeName = 4;
            } else {
              this.activeName = 2;
            }
            this.$message({
              message: '流程配置成功！！！',
              type: 'success',
              duration: 1200
            })
          }
        });
      }
    },
    /**
     * @Description: 每种条件结果中必须存在一个审批节点
     * @Param: 
     * @Author: wangwangwang
     */
    checkNodes(treeData) {
      for (let i = 0; i < treeData.length; i += 1) {
        if (treeData[i].stepType === 5 && treeData[i].title && !treeData[i].data) {
          this.$message({
            message: `条件节点为${treeData[i].nodeId}的节点没有设置条件，请设置后再提交`,
            type: 'warning'
          });
          return false;
        }
        if (treeData[i].childNode && treeData[i].childNode.length) {
          return this.checkNodes(treeData[i].childNode);
        }
      }
    },
    /**
     * @Description: 构造后端需要的数据
     * @Param: 
     * @Author: wangwangwang
     */
    formatNodeList(treeData) {
      treeData.forEach(item => {
        let previsousNodeIds = item.previsousNodeIds;
        if (previsousNodeIds) {
          if (typeof (previsousNodeIds) === 'object') {
            previsousNodeIds = JSON.stringify(previsousNodeIds)
          } else {
            previsousNodeIds = JSON.stringify(item.previsousNodeIds.split(','))
          }
        }
        if (item.childNode && item.childNode.length) {
          if (item.data) {
            const data = {
              nodeType: item.stepType,
              id: '',
              priorityNo: item.priorityNo,
              previsousNodeIds,
              data: item.data,
              processNodeConditionList: item.data,
              title: item.title,
              nextNodeIds: JSON.stringify(item.nextNodeIds),
              code: item.nodeId,
            }
            this.processNodeList.push(data);
          }
          this.formatNodeList(item.childNode);
        } else {
          const data = {
            nodeType: item.stepType,
            id: '',
            priorityNo: item.priorityNo,
            code: item.nodeId,
            title: item.title,
            previsousNodeIds,
            nextNodeIds: JSON.stringify(item.nextNodeIds),
          }
          /**
           * @Description: 如果是审批节点，则需要传节点参数及表单权限
           * @Param: 
           * @Author: wangwangwang
           */
          if (item.stepType === 3) {
            const processNodeFormVo = {
              formColumnData: JSON.stringify(item.data.tableData),
              formId: '', // 开发表单时传这个参数
              processManagerId: this.id,
            }
            if (item.data.form.handlerMenu) {
              if (typeof(item.data.form.handlerMenu) === 'object') {
                item.data.form.handlerMenu = item.data.form.handlerMenu.join(',')
              }
            }
            data.processApprovalNodeVo = item.data.form;
            data.processNodeFormVo = processNodeFormVo;
          } else if (item.stepType === 4) { // 抄送节点数据格式化
            const processNodeCCerSettingsVo = {
              filterType: item.data.filterType,
              processNodeCCerList: item.data.choisedPersonData,
            }
            data.processNodeCCerSettingsVo = processNodeCCerSettingsVo;
          } else if (item.stepType === 5) { // 设置条件节点
            data.processNodeConditionList = item.data;
          } else if (item.stepType === 6) { // 子流程数据格式化
            const processNodeSubProcessVo = {
              id: item.data.id,
              execteType: item.data.execteType,
              execteTime: item.data.execteTime,
              executeHandler: item.data.executeHandler,
              processMode: item.data.processMode,
              executeStatus: item.data.executeStatus ? '1' : '0'
            }
            data.processNodeSubProcessVo = processNodeSubProcessVo;
          }
          this.processNodeList.push(data);
        }
      });
    },
    /**
     * @Description: 给节点增加前后ids
     * @Param: 
     * @Author: wangwangwang
     */
    setNodeIds(treeData, parentIndex, parentData, grandIndex, grandParent) {
      treeData.forEach((item, index) => {
        if (item.stepType === 5) { // 条件父节点及条件节点
          const conditionFalse = index < (treeData.length - 1) ? treeData[index + 1].nodeId : null;
          if (item.data) { // 条件节点
            if (grandParent) {
              // 判断上一节点是否为条件节点，如果是则通过递归获取到上一节点的ids，如果不是则就是上一节点的ids
              if (grandParent[grandIndex].stepType !== 5) {
                item.previsousNodeIds = grandParent[grandIndex].nodeId;
              } else if (grandParent[grandIndex].stepType === 5 && grandParent[grandIndex].data) {
                item.previsousNodeIds = grandParent[grandIndex].nodeId;
              } else {
                const ids = [];
                this.setPreIds(grandParent[grandIndex], ids);
                item.previsousNodeIds = ids;
              }
              if (item.childNode.length) { // 存在下级节点时，既要设置本节点的ids同时也要设置下级节点的ids
                const nextNode = item.childNode[0]; // 获取下一节点
                if (nextNode.stepType === 5) {
                  const ids = []
                  nextNode.childNode.forEach((item2) => {
                    ids.push(item2.nodeId);
                  });
                  item.nextNodeIds = { condition_true: ids[0], condition_false: conditionFalse };
                } else {
                  item.nextNodeIds = { condition_true: nextNode.nodeId, condition_false: conditionFalse };
                }
                this.setNodeIds(item.childNode, index, treeData, grandIndex, grandParent);
              } else {
                /**
                 * @Description: 通过递归获取到当前节点的下一个节点
                 * @Param: 
                 * @Author: wangwangwang
                 */
                this.getNextNode(this.treeData, item);
                const nextNode = this.nextNode;
                // 需要判断下一节点是否为条件节点
                if (nextNode.stepType === 5) {
                  const ids = []
                  nextNode.childNode.forEach((item2) => {
                    ids.push(item2.nodeId);
                  });
                  item.nextNodeIds = { condition_true: ids[0], condition_false: conditionFalse };
                } else {
                  item.nextNodeIds = { condition_true: nextNode.nodeId, condition_false: conditionFalse };
                }
              }
            } else {
              // 判断上一节点是否为条件节点，如果是则通过递归获取到上一节点的ids，如果不是则就是上一节点的ids
              if (parentData[parentIndex - 1].stepType === 5) {
                const ids = [];
                this.setPreIds(parentData[parentIndex - 1], ids);
                item.previsousNodeIds = ids;
              } else {
                item.previsousNodeIds = parentData[parentIndex - 1].nodeId;
              }
              if (item.childNode.length) { // 存在下级节点时，既要设置本节点的ids同时也要设置下级节点的ids
                const nextNode = item.childNode[0]; // 获取下一节点
                if (nextNode.stepType === 5) {
                  const ids = []
                  nextNode.childNode.forEach((item2) => {
                    ids.push(item2.nodeId);
                  });
                  item.nextNodeIds = { condition_true: ids[0], condition_false: conditionFalse };
                } else {
                  item.nextNodeIds = { condition_true: nextNode.nodeId, condition_false: conditionFalse };
                }
                this.setNodeIds(item.childNode, index, treeData, parentIndex, parentData);
              } else {
                // 需要判断下一节点是否为条件节点
                if (parentData[parentIndex + 1].stepType === 5) {
                  const ids = []
                  parentData[parentIndex + 1].childNode.forEach((item2) => {
                    ids.push(item2.nodeId);
                  });
                  item.nextNodeIds = { condition_true: ids[0], condition_false: conditionFalse };
                } else {
                  item.nextNodeIds = { condition_true: parentData[parentIndex + 1].nodeId, condition_false: conditionFalse };
                }
              }
            }
          } else {
            this.setNodeIds(item.childNode, index, treeData, parentIndex, parentData);
          }
        } else {
          /**
           * @Description: 对开始节点和结束节点进行配置
           * @Param: 
           * @Author: wangwangwang
           */
          if (item.stepType === 1) {
            if (treeData[index + 1].stepType === 5) {
              const ids = []
              treeData[index + 1].childNode.forEach((item2) => {
                ids.push(item2.nodeId);
              })
              item.nextNodeIds = { condition_true: ids[0] };
            } else {
              item.nextNodeIds = { condition_true: treeData[index + 1].nodeId };
            }
          } else if (item.stepType === 2) {
            if (treeData[index - 1].stepType === 5) {
              const ids = [];
              this.setPreIds(treeData[index - 1], ids);
              item.previsousNodeIds = ids;
            } else {
              item.previsousNodeIds = treeData[index - 1].nodeId;
            }
          } else { // 普通节点设置
            if (parentData) { // 存在parentData时，为条件子节点
              if (index === 0) { // 此时为第一个子节点，上一个节点为父节点
                item.previsousNodeIds = parentData[parentIndex].nodeId;
                if ((parentData[parentIndex].childNode.length - 1) === index) { // 为最后一个节点
                  /**
                   * @Description: 通过递归获取到当前节点的下一个节点
                   * @Param: 
                   * @Author: wangwangwang
                   */
                  this.getNextNode(this.treeData, item);
                  const nextNode = this.nextNode;
                  // 需要判断下一节点是否为条件节点
                  if (nextNode.stepType === 5) {
                    const ids = []
                    nextNode.childNode.forEach((item2) => {
                      ids.push(item2.nodeId);
                    });
                    item.nextNodeIds = { condition_true: ids[0] };
                  } else {
                    item.nextNodeIds = { condition_true: nextNode.nodeId };
                  }
                } else { // 不是最后一个节点的时候只需要设置下一个节点即可
                  if (treeData[index + 1].stepType === 5) {
                    const ids = []
                    treeData[index + 1].childNode.forEach((item2) => {
                      ids.push(item2.nodeId);
                    })
                    item.nextNodeIds = { condition_true: ids[0] };
                  } else {
                    item.nextNodeIds = { condition_true: treeData[index + 1].nodeId };
                  }
                }
              } else { // 不为第一个子节点，上一个节点就为上一个兄弟节点
                if (treeData[index - 1].stepType === 5) {
                  const ids = [];
                  this.setPreIds(treeData[index - 1], ids);
                  item.previsousNodeIds = ids;
                } else {
                  item.previsousNodeIds = treeData[index - 1].nodeId;
                }
                if ((parentData[parentIndex].childNode.length - 1) === index) { // 为最后一个节点
                  /**
                   * @Description: 通过递归获取到当前节点的下一个节点
                   * @Param: 
                   * @Author: wangwangwang
                   */
                  this.getNextNode(this.treeData, item);
                  const nextNode = this.nextNode;
                  // 需要判断下一节点是否为条件节点
                  if (nextNode.stepType === 5) {
                    const ids = []
                    nextNode.childNode.forEach((item2) => {
                      ids.push(item2.nodeId);
                    });
                    item.nextNodeIds = { condition_true: ids[0] };
                  } else {
                    item.nextNodeIds = { condition_true: nextNode.nodeId };
                  }
                } else { // 不是最后一个节点的时候只需要设置下一个节点即可
                  if (treeData[index + 1].stepType === 5) {
                    const ids = []
                    treeData[index + 1].childNode.forEach((item2) => {
                      ids.push(item2.nodeId);
                    })
                    item.nextNodeIds = { condition_true: ids[0] };
                  } else {
                    item.nextNodeIds = { condition_true: treeData[index + 1].nodeId };
                  }
                }
              }
            } else {
              if (treeData[index + 1].stepType === 5) { // 普通节点的下一个节点
                const ids = []
                treeData[index + 1].childNode.forEach((item2) => {
                  ids.push(item2.nodeId);
                })
                item.nextNodeIds = { condition_true: ids[0] };
              } else {
                item.nextNodeIds = { condition_true: treeData[index + 1].nodeId };
              }
              if (treeData[index - 1].stepType === 5) { // 普通节点的上一个节点
                const ids = [];
                this.setPreIds(treeData[index - 1], ids);
                item.previsousNodeIds = ids;
              } else {
                item.previsousNodeIds = treeData[index - 1].nodeId;
              }
            }
          }
        }
      })
    },
    setPreIds(data, ids) {
      data.childNode.forEach((item) => {
        if (item.childNode.length) {
          /**
           * @Description: 如果继续存在条件将继续递归
           * @Param: 
           * @Author: wangwangwang
           */
          if (item.childNode[item.childNode.length - 1].stepType === 5) {
            this.setPreIds(item.childNode[item.childNode.length - 1], ids);
          } else {
            ids.push(item.childNode[item.childNode.length - 1].nodeId);
          }
        } else {
          ids.push(item.nodeId);
        }
      })
    },
    /**
     * @Description: 存在多个层级时 需要通过递归去获取下一节点
     * @Param: 
     * @Author: wangwangwang
     */
    getNextNode(treeData, data, parentIndex, parentData, grandIndex, grandParent) {
      for (let i = 0; i < treeData.length; i++) {
        if (data.nodeId === treeData[i].nodeId) {
          if (parentData) {
            if (parentData[parentIndex].data && parentData[parentIndex].stepType === 5) { // 条件节点
              if (treeData[i].stepType !== 5) {
                this.getNextNode(this.treeData, parentData[parentIndex]);
              } else {
                this.getNextNode(this.treeData, grandParent[grandIndex]);
              }
            } else if (parentData.length > parentIndex + 1) {
              this.nextNode = parentData[parentIndex + 1]
            } else { // 如果没有找到父节点的下一节点，那么将父节点作为一个节点继续找下一节点
              this.getNextNode(this.treeData, parentData[parentIndex]);
            }
          } else {
            this.nextNode = treeData[i + 1]
          }
        } else {
          if (treeData[i].childNode && treeData[i].childNode.length) {
            this.getNextNode(treeData[i].childNode, data, i, treeData, parentIndex, parentData);
          }
        }
      }
    },
    closeModel() {
      this.visible = false;
    },
    /**
     * @Description: 获取到发起人
     * @Param: 
     * @Author: wangwangwang
     */
    setSendPerson(data) {
      this.visible = false;
      this.choisedPersonData = data;
    },
    sureSubmit() {
      const newString = [];
      this.choisedPersonData.forEach(item => {
        newString.push(item.name);
      });
      this.showApprovePerson = newString.join(';');
      this.showPersonVisible = false;
    }
  },
  mounted() {
    this.index = this.$route.query.index * 1;
    this.id = this.$route.query.id;
    this.flowsName = this.$route.query.name;
    this.initBaseData();
  }
}
</script>
<style lang="scss" scoped>
.config-container {
  .config-header {
    padding: 0 15px;
    .config-title {
      font-size: 22px;
      color: $bg_color;
    }
    .config-submit {
      text-align: right;
    }
  }
  .choise-approve {
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 1px 15px;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    cursor: pointer;
  }
  .approve-person {
    font-size: 15px;
    margin: 10px 0;
  }
  .fileter-type {
    margin: 10px 0;
  }
  .tabs-container {
    margin: 15px 0;
    height: 56px;
    background: rgba(245, 247, 250, 1);
    display: flex;
    border-bottom: 1px solid #e1e5ed;
    .tabs-list {
      font-size: 16px;
      height: 56px;
      line-height: 56px;
      color: #4b4c4d;
      margin: 0 30px 0 15px;
    }
    .active {
      color: $bg_color;
      border-bottom: 3px solid $bg_color;
    }
  }
}
.transfer-container {
  .hanlde-title {
    margin-bottom: 10px;
  }
  .hanlde-container {
    border-radius: 5px;
    border: 1px solid #dcdfe6;
    height: 500px;
    overflow: scroll;
    padding: 15px;
  }
}
.handle-submit {
  padding-top: 200px;
  text-align: center;
  div {
    margin: 20px 0px;
  }
}
.person-tag {
  margin-left: 10px;
  background: $bg_color;
  color: #fff;
}
</style>
